import React from 'react';
import { MilepostC, SecondHeaderC } from '../../comps';

class MilepostCDemo extends React.Component {
  state = {
    data: [
      { name: '发行日', date: '2006-07-31' },
      { name: '起息日', date: '2006-07-31' },
      { name: '缴款日', date: '2006-08-09' },
      { name: '上市日', date: '2006-08-15' },
      { name: '付息日', date: '2021-07-31' },
      { name: '到期日', date: '2021-07-31' },
    ],
    data1: [
      { name: '买入提交', date: 'T日' },
      { name: '确认份额', date: 'T+1日' },
      { name: '查看持仓', date: 'T+3日' },
    ],
  };
  render() {
    return (
      <div style={{ padding: '20px' }}>
        <SecondHeaderC title='进度条' />
        <div style={{ width: '800px' }}>
          <MilepostC data={this.state.data} />
        </div>
        <SecondHeaderC title='仅作展示,非进度条' />
        <div style={{ width: '800px' }}>
          <MilepostC data={this.state.data1} type='view' />
        </div>
      </div>
    );
  }
}

export default MilepostCDemo;
